<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">

    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../lib/echarts.min.js"></script>

    <style>
        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }

        .layui-table img {
            width: 100px;
            height: 80px;
        }
    </style>

</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">


            <!-- echarts 饼状图 -->
            <div id="pieChart" style="width: 600px;height:400px; display: none"></div>
            <!-- echarts 柱形图 -->
            <div id="histogram" style="width: 600px;height:400px; display: none"></div>


            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">科室ID</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="id" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">科室名称</label></label>
                                <div class="layui-input-inline">
                                    <input type="text" name="departmentName" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">医生人数</label></label>
                                <div class="layui-input-inline">
                                    <input type="text" name="doctorId" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>

                </div>
            </fieldset>

            <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除 </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="echarts"> 人数饼状图 </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="echarts1"> 人数柱形图 </button>
            </div>
            
        </script>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

        </div>

    </div>
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

    <script type="text/html" id="pic">
        <!-- 这里的 checked 的状态只是演示 -->
    <img src="{{d.img}}" name="img" alt="">
    </script>

    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            table.render({
                elem: '#currentTableId',
                url: 'http://localhost:8080/api/department/departmentPageData',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                contentType: "application/x-www-form-urlencoded",
                cols: [[
                    { type: "checkbox", width: 50 },
                    { field: 'id', width: 120, title: '科室ID', sort: true },
                    { field: 'departmentName', width: 180, title: '部门名称' },
                    { field: 'doctorId', width: 120, title: '医生人数', sort: true },
                    { field: 'img', width: 180, title: '科室图像', templet: '#pic' },
                    { title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }
                ]],
                limits: [5, 10, 15],
                limit: 10,
                page: true,
                skin: 'line'
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);
                layer.alert(result, {
                    title: '最终的搜索信息'
                });

                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        "id": data.field.id,
                        "departmentName": data.field.departmentName,
                        "doctorId": data.field.doctorId,
                    }
                }, 'data');

                return false;
            });

            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    var index = layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['50%', '70%'],
                        content: 'department-add.html',
                        end: function (index) {
                            table.reload('currentTableId');
                        }

                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                } else if (obj.event === 'delete') {
                    // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data), {
                        end: function () {
                            table.reload('currentTableId');
                        }
                    });
                    console.log(data);

                    for (let index = 0; index < data.length; index++) {
                        const obj = data[index];
                        $.ajax({
                            method: "post",
                            url: "http://localhost:8080/api/department/deleteDepartmentData",
                            data: { id: obj.id }
                        });
                    }

                    // $.ajax({
                    //     "method": "post",
                    //     "url": "http://localhost:8080/api/department/deleteSelectedDepartmentData",
                    //     "data": JSON.stringify(data),

                    //     "success": function (result) {
                    //         if (result.code == 0) {
                    //             layer.msg(result.msg)
                    //         } else {
                    //             layer.msg(result.msg)
                    //         }
                    //     }
                    // });

                    return false;
                    
                } else if (obj.event === 'echarts') {
                    layer.open({
                        content: $('#pieChart'),
                        type: 1,
                        shadeClose: true,
                        end: function () {
                            location.reload();
                        }
                    })
                } else if (obj.event === 'echarts1') {
                    layer.open({
                        content: $('#histogram'),
                        type: 1,
                        shadeClose: true,
                        end: function () {
                            location.reload();
                        }
                    })
                }

            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {

                    localStorage.setItem = ("setItem", JSON.stringify(data));
                    var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['70%', '80%'],
                        content: 'department-edit.html',
                        end: function (index) {
                            table.reload('currentTableId');
                        }
                    });

                    $(window).on("resize", function () {
                        layer.full(index);

                    });
                    return false;
                } else if (obj.event === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            "url": "http://localhost:8080/api/department/deleteDepartmentData",
                            "data": {
                                "id": data.id
                            },
                            "success": function (result) {
                                if (result.code == 0) {
                                    layer.msg("删除成功")
                                    obj.del();
                                } else {
                                    layer.msg("删除失败")
                                }
                            }
                        });
                        layer.close(index);

                    });
                }
            });

        });
    </script>


    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('pieChart'));

        $(function () {
            $.ajax({
                "url": "http://localhost:8080/api/department/departmentPieChart",
                "success": function (data) {

                    var param = { data: [] };
                    for (var i = 0; i < data.length; i++) {
                        var obj = {};
                        obj.value = data[i]["doctorId"];
                        obj.name = data[i]["departmentName"];
                        param["data"].push(obj);
                    }


                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '人数',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: param["data"]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        });

    </script>


    <script type="text/javascript">

        var myChart1 = echarts.init(document.getElementById('histogram'));

        $(function () {
            $.ajax({
                "url": "http://localhost:8080/api/department/departmentHistogram",
                "success": function (result) {

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '医生人数分布'
                        },
                        tooltip: {},
                        legend: {
                            data: ['人数']
                        },
                        xAxis: {
                            data: result.departmentList
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '人数',
                                type: 'bar',
                                data: result.numList
                            }
                        ]
                    };

                    myChart1.setOption(option);
                }
            });
        });

    </script>

</body>

</html>